<!DOCTYPE html>
<html lang="en" class="app"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://rbac.rbacshiro.com"
>
<head th:include="template/top"></head>
<body>
<section class="vbox">
    <header th:include="template/header" class="bg-dark dk header navbar navbar-fixed-top-xs"></header>
    <section>
        <section class="hbox stretch">
            <!-- .aside -->
            <aside th:include="template/menu" class="bg-dark lter aside-md hidden-print" id="nav"></aside>
            <!-- /.aside -->
            <section id="content">
                <section class="hbox stretch">
                    <aside>
                        <section class="vbox">
                            <section class="scrollable padder">
                                <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                                    <li><a href="index.html"><i class="fa fa-home"></i> 首页</a></li>
                                    <li class="active">权限控制</li>
                                    <li class="active">账号管理</li>
                                </ul>
                                <header class="header bg-white b-b clearfix">
                                    <div class="row m-t-sm">
                                        <div class="col-sm-8 m-b-xs">
                                            <shiro:hasPermission values="RBAC_AUTHORITY_USER_ADD" logical="AND">
                                            <a href="javascript:" data-target="user-add.html" id="addUser" class="btn btn-sm btn-default"><i class="fa fa-plus"></i> 添加</a>
                                            </shiro:hasPermission>
                                        </div>
                                    </div>
                                </header>
                                <section class="scrollable wrapper w-f">
                                    <section class="panel panel-default">
                                        <div class="table-responsive">
                                            <table class="table table-striped m-b-none">
                                                <thead>
                                                <tr>
                                                    <th>账号名称</th>
                                                    <th>注册时间</th>
                                                    <th>登录时间<a href="#" data-toggle="tooltip" data-placement="bottom" data-original-title="最后一次登录的时间">?</a></th>
                                                    <th>IP<a href="#" data-toggle="tooltip" data-placement="bottom" data-original-title="最后一次登录的IP">?</a></th>
                                                    <shiro:hasPermission values="RBAC_AUTHORITY_USER_LOGIN" logical="AND">
                                                    <th>登录<a href="#" data-toggle="tooltip" data-placement="bottom" data-original-title="账号是否可以登录">?</a></th>
                                                    </shiro:hasPermission>
                                                    <th width="30"></th>
                                                </tr>
                                                </thead>
                                                <tbody id="data-list">
                                                    <tr>
                                                        <td>
                                                            <ul class="nav navbar-nav navbar-left hidden-xs nav-user">
                                                                <li>
                                                                    <a href="user-detail.html?uuid={{item.uuid}}" class="dropdown-toggle" >
                                                                    <span class="thumb-sm avatar pull-left"><img src="user/avatar?uuid={{item.uuid}}" style="width: 28px;height: 28px"></span>{{item.username}}
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </td>
                                                        <td>{{item.registerTime}}</td>
                                                        <td>{{item.lastLoginTime}}</td>
                                                        <td>{{item.lastLoginIp}}</td>
                                                        <shiro:hasPermission values="RBAC_AUTHORITY_USER_LOGIN" logical="AND">
                                                        <td>
                                                            <div class="m-b-sm">
                                                                <div class="btn-group toogle-status" data-toggle="buttons" data-id="{{item.uuid}}">
                                                                    {{if item.status == 1}}
                                                                    <label class="btn btn-sm btn-info">
                                                                        <input type="radio" name="options" value="0" id="option1">
                                                                        <i class="fa fa-check text-active"></i> 禁止 </label>
                                                                    <label class="btn btn-sm btn-success active">
                                                                        <input type="radio" name="options" value="1" id="option2">
                                                                        <i class="fa fa-check text-active"></i> 解禁 </label>
                                                                    {{else}}
                                                                    <label class="btn btn-sm btn-info active">
                                                                        <input type="radio" name="options" value="0" id="option1">
                                                                        <i class="fa fa-check text-active"></i> 禁止 </label>
                                                                    <label class="btn btn-sm btn-success">
                                                                        <input type="radio" name="options" value="1" id="option2">
                                                                        <i class="fa fa-check text-active"></i> 解禁 </label>
                                                                    {{/if}}
                                                                </div>
                                                            </div>
                                                        </td>
                                                        </shiro:hasPermission>
                                                        <td width="30"></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </section>
                                </section>
                            </section>
                            <footer class="footer bg-white b-t">
                                <div class="row text-center-xs">
                                    <div class="col-md-6 hidden-sm"></div>
                                    <div class="col-md-6 col-sm-12 text-right text-center-xs" id="pagination">
                                        <!--   分页区 -->
                                    </div>
                                </div>
                            </footer>
                        </section>
                    </aside>
                </section>
                <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a> </section>
            <aside class="bg-light lter b-l aside-md hide" id="notes">
                <div class="wrapper">Notification</div>
            </aside>
        </section>
    </section>
</section>
<script th:replace="template/js"></script>
<script src="menu.js"></script>
<script>
    var usersTemplate = loadArtTemplate('data-list');
</script>
<shiro:hasPermission values="RBAC_AUTHORITY_USER" logical="AND">
    <script src="jquery.paging.min.js"></script>
    <script>
        var showPage = function(list){
            var trList = [];
            for(var k in list) {
                var render = template.compile(usersTemplate);
                trList.push(render({
                    item:list[k]
                }));
            }
            $('#data-list').html(trList.join(''));
        };

        var loadUsers = function(page){
            commonAjax({
                url : "user/list",
                data:{
                    page : page
                },
                dataType:'json',
                success:function(result) {
                    showPage(result.list);
                }
            });
        };

        commonAjax({
            url : "user/list",
            data:{},
            dataType:'json',
            success:function(result) {
                buildPage("#pagination", result, loadUsers);
            }
        });
    </script>
    <shiro:hasPermission values="RBAC_AUTHORITY_USER_LOGIN" logical="AND">
    <script>
        $(document).on('click', '.toogle-status', function(){
            var uuid = $(this).data('id');
            var status = $(this).find('input:checked').val();
            console.log($(this).find('input:checked').val());
            commonAjax({
                url : 'user/toggleStatus',
                data : {
                    uuid : uuid,
                    status : status
                },
                type : 'post',
                dataType:'json',
                success:function(result){

                }
            });
        });
    </script>
    </shiro:hasPermission>
    <shiro:hasPermission values="RBAC_AUTHORITY_USER_ADD" logical="AND">
    <script>
        $('#addUser').click(function(){
            layer.open({
               type:2,
               content:[$(this).data('target'), 'no'],
               area:['550px', '500px']
           });
        });
    </script>
    </shiro:hasPermission>
</shiro:hasPermission>
</body>
</html>